<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<html>
  <head>
    <title>Ajax Auto Complete</title>
    <style type="text/css">
    .mouseOut {
    background: #708090;
    color: #FFFAFA;
    }
    .mouseOver {
    background: #FFFAFA;
    color: #000000;
    }
    
    @import url("http://www.google.com/uds/css/gsearch.css");
    @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
    
    </style>
    
    <!-- 구글맵 관련 script -->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGYnN7Uka2s19fDhh7ernqxTwM0brOpm-All5BF6PoaKBxRWWERTApR08561_dhgTs8UD3BNkiL_IBA"
            type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <!-- 구글맵 관련 script 끝 -->
    
    <script type="text/javascript">
    
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {        	
        
        var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(37.48023913303694, 126.93191528320312), 15);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		//map.setMapType(G_SATELLITE_MAP); //위성사진으로 보기
		//map.openInfoWindow(map.getCenter(), document.createTextNode("신림본동"));      
		
		//map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
       }
    }
    //]]>
    
    
   //구글맵 세팅 
   function initialize() {
      if (GBrowserIsCompatible()) {
        // Create and Center a Map
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
      }
    }
    
    
    
        var xmlHttp;
        var completeDiv;
        var inputField;
        var nameTable;
        var nameTableBody;
        
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();     
            }
        }
        function initVars() {
            inputField = document.getElementById("names");
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
        }
        
        function search() {
	        initVars();
	        if (inputField.value.length > 0) {
	                createXMLHttpRequest();
	                var url = "AjaxAutoXml.do";
	                xmlHttp.open("POST", url, true);
	                xmlHttp.onreadystatechange = callback;
	                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;");
	                xmlHttp.send("names=" +inputField.value+"&rownum=15");
	        } else {
	                clearNames();
	        }
 		}
        
        
        //xml로 요청값을 받을때
        function callback2() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                } else if (xmlHttp.status == 204){//데이터가 존재하지 않을 경우
                    clearNames();
                }else{
                 	clearNames();
                }
            }
        }
        
        
        //json으로 요청값을 받을때
        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                   var result = xmlHttp.responseText;
                   var autoComplete = eval('(' + result + ')');
                   
                   setNames(autoComplete);
                } else if (xmlHttp.status == 204){//데이터가 존재하지 않을 경우
                    clearNames();
                }else{
                 	clearNames();
                }
            }
        }
        
        
        function setNames(autoComplete) {
            clearNames();
            var size = autoComplete.namelist.length;
            
            setOffsets();
            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = autoComplete.namelist[i].dong+"   "+autoComplete.namelist[i].zipcode;
                //var nextNode = autoComplete[i].dong;
                row = document.createElement("tr");
                cell = document.createElement("td");
                
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
                cell.onclick = function() { populateName(this);};                     
                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
        }
        
        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width = end + "px";
        }
        
        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }
        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        }
        function calculateOffset(field, attr) {
          var offset = 0;
          while(field) {
            offset += field[attr]; 
            field = field.offsetParent;
          }
          return offset;
        }
        function populateName(cell) {
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }
        function clearNames() {
            var ind = nameTableBody.childNodes.length;
            for (var i = ind - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
        }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  	<!-- 
  	Jstl 및 한글  Test : <c:out value="${resultMap.name}" />
  	 -->
    <h1>Ajax AutoComplete Test</h1>
    
    <table border="0">
    	<tr>
    		<td valign="top" >
    			검색: <input type="text" size="30" id="names" onkeyup="search();" style="height:20;"/>
    			<div style="position:absolute;" id="popup">
			        <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>            
			            <tbody id="name_table_body"></tbody>
			        </table>
			    </div>		
    		</td>
    		<td>
   				 <div id="map" style="width: 400px; height: 300px"></div> 		
    		</td>
    	</tr>
    </table>
    
   
    
    <br>
    <br><br><br>
    
    
    
    
    
  </body>
</html>
